<script lang="ts" setup>
definePageMeta({
    layout: false,
})
useHead({
    bodyAttrs: {
        class: 'compatibility page-template page-template-doc page page-child'
    }
})
</script>
<template>
    <NuxtLayout name="common">
        <template v-slot:nav>
            <Nav :title="'主题兼容性提示'"/>
        </template>
        <template v-slot:header>
            <header id="masthead" class="site-header header-bg" role="banner">
                <h2 class="site-branding">主题兼容性提示</h2>
            </header>
        </template>
        <template v-slot:main>
            <article class="page status-publish hentry">
                <div class="entry-content">
                    <p class="fade-before fade-after">更新时间：2024年03月31日</p>
                    <h5 class="block-heading fade-before fade-after">最优建议及卡顿情况报告</h5>
                    <div class="block-columns fade-before fade-after">
                        <div class="block-column">
                            <ul>
                                <li>最佳浏览器：Chromium 版本不低于 110 的 Edge 或 Chrome。</li>
                                <li>最佳分辨率：电脑端设备高于 1920 × 1080 。</li>
                                <li>建议在本地安装以下字体获得最佳体验：苹方、得意黑</li>
                            </ul>
                        </div>
                        <div class="block-column">
                            <ul>
                                <li>
                                    因为使用了大量动画渲染，因此在性能一般的电脑上或没有开启硬件加速的浏览器，可能会出现卡顿。
                                </li>
                            </ul>
                        </div>
                    </div>
                    <h5 class="block-heading fade-before fade-after">最新版浏览器兼容性报告</h5>
                    <pre class="block-code fade-before fade-after">
                        <code>Chrome / Edge / Opera
	无问题

Safari ios
	transform 和 border-radius 同时使用会导致 border-radius 失效 <kbd>bug 已有替代方案 在父元素添加 transform:rotate(0deg)</kbd>
	white-space: nowrap 和 overflow-x: scroll 横向滚动失效 <kbd>bug 无解</kbd>

Firefox
	部分动画运行时掉帧 <kbd>浏览器问题 无解</kbd>
	webkit 自定义进度条样式失 <kbd>效浏览器问题 无解</kbd>
	transition 和 animation 同时使用会导致 animation-delay 对 transition 生效<kbd>bug 无解</kbd>

QQ 浏览器 / 360 浏览器
	部分动画运行时掉帧 <kbd>浏览器问题 无解</kbd>
	counter-reset 处理 calc 函数时无效 <kbd>浏览器问题 无解</kbd>
	scale 不支持 <kbd>浏览器问题 不影响关键浏览</kbd>
	transform scale 和 filter opacity 同时使用会导致 img 透明区域不透明并出现黑色<kbd>bug 已有替代方案</kbd>

IE 全系 / EdgeHTML / 手机版 UC 浏览器
	已放弃兼容

注：以上浏览器版本，均为截止上述更新日期最近的最新版进行测试。
                        </code>
                    </pre>
                    <h5 class="block-heading fade-before fade-after">本站使用的浏览器支持但未进入 W3C 标准的 CSS 属性报告</h5>
                    <pre class="block-code fade-before fade-after"><code>字体
	-webkit-text-stroke
	-webkit-text-fill
	-webkit-text-size-adjust
	-webkit-font-smoothing
	-ms-text-size-adjust
	-ms-word-wrap
	-moz-osx-font-smoothing
区块
	overflow overlay
	-webkit-box-decoration-break
控件
	-webkit-appearance
遮罩
	-webkit-mask
多行省略
	-webkit-box
	-webkit-box-orient
	-webkit-line-clamp
滚动
	-webkit-scrollbar
	-webkit-scrollbar-thumb
	-webkit-overflow-scrolling </code></pre>
                </div>
            </article>
        </template>
    </NuxtLayout>
</template>
<style scoped>
.header-bg {
    background: black url(@/assets/policy/4.jpg) no-repeat scroll center / cover;
}

.block-columns {
    align-items: normal;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-divs);
}

.block-column {
    word-break: break-all;
    overflow-wrap: anywhere;
    padding: .5em 1em;
    border: var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    min-width: 0;
}
.block-code{
    box-sizing: border-box;
    background: none;
}
kbd {
    margin: 0 0 0 .5rem;
}
@media (min-width: 782px) {
    .block-columns {
        flex-wrap: nowrap;
    }

    .block-column {
        flex-basis: 0;
        flex-grow: 1;
    }
}

@media (min-width: 1152px) {
    .page-template-doc .site-header {
        position: fixed;
        right: 0;
        width: 45%;
        top: 0;
        margin: 0;
        border-radius: 0;
        height: 100%;
        animation: board-siteBG 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1;
        box-shadow: inset rgb(0 0 0 / 50%) 0.5rem 0 1rem 0;
    }

    .page-template-doc .content-area {
        width: 55%;
        position: relative;
        margin-left: 0;
        animation: board-entryBG 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1;
    }

    @keyframes board-entryBG {
        0% {
            left: -60%;
        }
        100% {
            left: 0;
        }
    }
    @keyframes board-siteBG {
        0% {
            width: 100%;
        }
        100% {
            width: 45%;
        }
    }
}
</style>
